<template>
    <div>
        <div class="city" v-show="sticky">
            <van-nav-bar
                title="电影"
                left-arrow:false
                @click-left="onClickLeft"
            >
            <template #left>
                {{ $store.state.city }}<van-icon name="arrow-down" />
            </template>
        </van-nav-bar>
        </div>
       <Header :class="{header: sticky}"></Header>
       <router-view></router-view>
    </div>
</template>

<script>
import { NavBar } from 'vant';
import { createApp } from 'vue';
import 'vant/lib/index.css';
const app = createApp()
app.use(NavBar);
import Header from '@/components/topNav.vue'
export default {
    created() {
        this.$store.commit('changeActive', 0)
    },
    data () {
        return {
            sticky: false,
            name1:''
        }
    },
    components: {
        Header
    },
    methods: {
        onClickLeft() {
            this.$router.push({
                path: '/city',
                query: {
                    url: this.$route.path
                }
            })
        },
        
    },
    mounted () {
        this.name1 = this.$route.query.name
        window.addEventListener('scroll', (e) => {
            let scrollTop = document.documentElement.scrollTop
            if(scrollTop >= 200){
                this.sticky = true
            }else{
                this.sticky = false
            }
        })
    }
}
</script>

<style lang="scss" scoped>
    .header{
    position: fixed;
    width: 100%;
    z-index:9;
    top: 50px;
    left: 0;
}
.city{
    height: 50px;
    width: 100%;
    position: fixed;
    z-index:9;
    top:0;
    left: 0;
    background-color: #fff;
    >span {
        position: absolute;
        left: 10px;
        top: 20px;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: rgba(0,0,0,.5);
        border-radius: 15px;
        color: #fff;
        font-size: 14px;
        i{
            margin-left:10px;
            font-size: 12px;
            font-weight: bold;
        }
    }
}
</style>
